<template>
  <div class="handle-risks_common"
       v-loading.fullscreen.lock="handle.save"
       v-cloak>
    <div class="outside-top">
      <div class="ost ost-1">
        <div class="ost-title">
          <slot name="name"></slot>
        </div>
        <div class="ost-progress">
          <vm-handle-progress :progress_data="progress_data_source5"
                              v-if="progress_data_source5_show"></vm-handle-progress>
        </div>
      </div>
      <div class="ost ost-2">
        <div class="ost-title">
          <slot name="types"></slot>
        </div>
        <div class="ost-emerge">
          <vm-handle-form :form_data="form_data_threat5"
                          v-if="form_data_threat5_show"></vm-handle-form>
        </div>
      </div>
    </div>
    <slot></slot>
    <div class="outside-bottom common-invest">
      <div class="invest">
        <div class="invest_form invest_form_network">
          <el-form class="common-pattern">
            <el-row class="common_box"
                    style="padding-bottom:16px;border-bottom: 1px solid #ECECEC;">
              <el-col :span="24"
                      class="common_box_list">

                <!--搜索关键词-->
                <el-input class="s_key"
                          placeholder="Search keywords"
                          v-model="params.key_word"
                          clearable>
                  <i slot="prefix"
                     class="el-input__icon el-icon-search"></i>
                </el-input>

                <!--时间-->
                <vm-emerge-picker @changeTime='changeTime'></vm-emerge-picker>

                <!--告警类型-->
                <el-select class="s_key s_key_types"
                           v-model="params.threat"
                           clearable
                           placeholder="Compromise"
                           @change="currentSelChange">
                  <el-option v-for="item in options_threat"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>

                <!--威胁等级-->
                <el-select class="s_key"
                           v-model="params.degree"
                           clearable
                           placeholder="Severity"
                           :popper-append-to-body="false">
                  <el-option v-for="item in options_degrees"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>

                <!--处理状态-->
                <el-select class="s_key"
                           v-model="params.status"
                           clearable
                           placeholder="Status"
                           @change="currentSelChange">
                  <el-option v-for="item in options_status"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>

                <el-button class="s_btn"
                           @click="submitClick();">Search</el-button>
                <span class="s_link"
                      @click="resetClick();"
                      style="cursor: pointer">Reset</span>
              </el-col>
            </el-row>

            <!--按钮组-->
            <el-row class="common_btn">
              <el-col :span="24"
                      class="common_btn_list">
                <el-dropdown @command="change_state"
                             trigger="click"
                             placement='bottom-start'
                             size='148'>
                  <el-button type="primary"
                             class="change_btn">
                    <span>Status</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown"
                                    class="dropdown_ul_box">
                    <el-dropdown-item command="In Progress"
                                      class="select_item">In Progress</el-dropdown-item>
                    <el-dropdown-item command="Resolved"
                                      class="select_item">Resolved</el-dropdown-item>
                    <el-dropdown-item command="Ignored"
                                      class="select_item">Ignored</el-dropdown-item>
                    <el-dropdown-item command="False positive"
                                      class="select_item">False positive</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="change_task"
                             placement='bottom-start'
                             trigger="click">
                  <el-button type="primary"
                             class="change_btn">
                    <span>Ticket</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown"
                                    class="dropdown_ul_box">
                    <el-dropdown-item command="Create">Create</el-dropdown-item>
                    <el-dropdown-item command="Add to ticket">Add to ticket</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-form>
          <el-table ref="multipleTable"
                    class="common-table"
                    align="center"
                    border
                    v-loading="table.loading"
                    :data="table.tableData"
                    tooltip-effect="dark"
                    :row-style="{cursor:'pointer'}"
                    @selection-change="handleSelChange"
                    @row-click="detail_click"
                    @mousedown.native="mousedown"
                    @mouseup.native="mouseup">
            <el-table-column prop="type"
                             width="20">
              <template slot-scope="scope">
                <div class="new_dot"
                     v-show="scope.row.new_alert=='1'"></div>
              </template>
            </el-table-column>
            <el-table-column type="selection"
                             width="50"></el-table-column>
            <el-table-column label="Time"
                             width="180"
                             show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.alert_time | time }}</template>
            </el-table-column>
            <el-table-column prop="category"
                             label="Type"
                             min-width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="indicator"
                             label="Indicator"
                             min-width="120"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="src_ip"
                             label="Source IP"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="dest_ip"
                             label="Destination IP"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="application"
                             label="Protocol"
                             min-width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="Severity"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="btn_alert_background"
                      :class="{'high_background':scope.row.degree =='High risk','mid_background':scope.row.degree =='Medium risk','low_background':scope.row.degree =='Low risk'}">
                  {{ scope.row.degree | degree_sino }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Compromise"
                             min-width="120">
              <template slot-scope="scope">
                <span :class="{'fall_certainty':scope.row.fall_certainty == '1'}">
                  {{ scope.row.fall_certainty | certainty }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Status"
                             width="120">
              <template slot-scope="scope">{{ scope.row.status | alert_status }}</template>
            </el-table-column>
          </el-table>
          <el-pagination class="handle-pagination"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :page-sizes="[10,20,50,100]"
                         :page-size="table.eachPage"
                         :total="table.count"
                         layout="total, sizes, prev, pager, next">
          </el-pagination>
        </div>

      </div>
    </div>

    <!-- 弹窗 -->
    <!-- 状态变更 -->
    <el-dialog class="pop_state_box"
               :close-on-click-modal="false"
               :modal-append-to-body="false"
               :visible.sync="state_change">
      <img src="@/assets/images/emerge/closed.png"
           @click="closed_state"
           class="closed_img"
           alt="">
      <div class="title">
        <div class="mask"></div>
        <span class="title_name">Status</span>
      </div>
      <div class="content">
        <p class="content_p"
           style="font-size:0">
          <span style="font-size:14px">Please confirm to change the status of the selected </span>
          <span style="font-size:14px">{{table.multipleSelection.length}}</span>
          <span style="font-size:14px"
                v-if="table.multipleSelection.length==1"> &nbsp;item to "</span>
          <span style="font-size:14px"
                v-if="table.multipleSelection.length!=1"> &nbsp;items to "</span>
          <span style="font-size:14px">{{process_state}}</span>
          <span style="font-size:14px">"?</span>
        </p>
      </div>
      <div class="btn_box">
        <el-button @click="cancel_state"
                   class="cancel_btn">Cancel</el-button>
        <el-button @click="ok_state"
                   class="ok_btn">Confirm</el-button>
      </div>
    </el-dialog>

    <!-- 弹窗 -->
    <!-- 工单任务 -->
    <el-dialog class="task_new_box pop_box"
               :close-on-click-modal="false"
               :modal-append-to-body="false"
               :visible.sync="task.new">
      <img src="@/assets/images/emerge/closed.png"
           @click="closed_task_new"
           class="closed_img"
           alt="">
      <div class="title">
        <div class="mask"></div>
        <span class="title_name">Edit</span>
      </div>
      <div class="step_box">
        <div class="step_box1">
          <span class="step1_span"
                :class="task.new_contet?'step_now':'step_past'">Basic Info</span>
          <img src="@/assets/images/emerge/selected01.png"
               class="selected_img"
               alt="">
        </div>
        <div class="step_box2">
          <span class="step2_span"
                :class="!task.new_contet?'step_now':'step_past'">Content</span>
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="task_new_content"
           v-if="task.new_contet">

        <!--出现滚动条-->
        <div class="task_content_box">
          <div class="content_top">
            <div class="content_top_left">
              <li class="left_item">
                <div class="title">
                  <span>Name</span>
                  <span class="improtant_ico">*</span>
                </div>
                <el-input class="task_new_input"
                          placeholder="Please enter a ticket name"
                          v-model="task_params.name"
                          show-word-limit
                          maxlength="32"
                          clearable>
                </el-input>
              </li>
              <li class="left_item">
                <div class="title">
                  <span>Assignee</span>
                  <span class="improtant_ico">*</span>
                </div>
                <el-select class="task_new_input"
                           v-model="task_params.operator"
                           clearable
                           placeholder="Please select the assignee">
                  <el-option v-for="item in task_new.operator_list"
                             @click.native="select_changced(item)"
                             :key="item.id"
                             :label="item.username"
                             :value="item.username">
                  </el-option>
                </el-select>
              </li>
            </div>
            <div class="content_top_right">
              <li class="right_item">
                <div class="title">
                  <span>Priority</span>
                  <span class="improtant_ico">*</span>
                </div>
                <el-select class="task_new_input"
                           v-model="task_params.level"
                           clearable
                           placeholder="Please select the priority">
                  <el-option v-for="item in task_new.level_list"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </li>
              <li class="right_item">
                <el-checkbox-group v-model="task_params.notice"
                                   class="checkbox_group">
                  <el-checkbox label="email"
                               value="email">Mail Notification</el-checkbox>
                  <el-checkbox label="message"
                               value="message">SMS Notification</el-checkbox>
                  <el-checkbox label="news"
                               value="news">Message Center Notification</el-checkbox>
                </el-checkbox-group>
              </li>
            </div>
          </div>
          <div class="content_remarks">
            <p class="title">Remarks</p>
            <el-input type="textarea"
                      :rows="4"
                      placeholder="Please enter the remark"
                      maxlength="500"
                      show-word-limit
                      v-model="task_params.textarea">
            </el-input>
          </div>
          <div class="content_table">
            <el-table :data="table_operator.tableData"
                      align="center"
                      border
                      style="width: 100%">
              <el-table-column prop="username"
                               label="Assignee"></el-table-column>
              <el-table-column prop="department"
                               label="Department"></el-table-column>
              <el-table-column prop="email_addr"
                               label="Email"></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="btn_box">
          <el-button @click="closed_task_new"
                     class="cancel_btn">Cancel</el-button>
          <el-button @click="next_task_new"
                     class="next_btn">Next</el-button>
        </div>
      </div>

      <!-- 处置内容 -->
      <div class="task_handle_content"
           v-if="!task.new_contet">
        <div class="task_content_box">
          <div class='table_box'>
            <ul class="table_box_title">
              <li v-for="(tab,index) in handle.table_title"
                  @click="table_btn_toggle(index)"
                  :class="{active:handle.active==index}">
                {{tab}}
              </li>
            </ul>
            <div>
              <div v-show="handle.active == 0">
                <el-table class="common-table"
                          :data="table_alerts.tableData_new"
                          tooltip-effect="dark"
                          @selection-change="handle_sel_table_alerts">
                  <el-table-column type="selection"
                                   width="50"></el-table-column>
                  <el-table-column prop="category"
                                   label="Type"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column prop="indicator"
                                   label="Indicator"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column prop="application"
                                   label="Protocol"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column label="Severity"
                                   width="100">
                    <template slot-scope="scope">
                      <span class="btn_alert_background"
                            :class="{'high_background':scope.row.degree =='High risk','mid_background':scope.row.degree =='Medium risk','low_background':scope.row.degree =='Low risk'}">
                        {{ scope.row.degree | degree_sino }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="Compromise"
                                   width="120">
                    <template slot-scope="scope">
                      <span :class="{'fall_certainty':scope.row.fall_certainty == '1'}">
                        {{ scope.row.fall_certainty | certainty }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="Status"
                                   width="80">
                    <template slot-scope="scope">{{ scope.row.status | alert_status }}</template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pagination_box"
                               @size-change="sc_table_alerts"
                               @current-change="hcc_table_alerts"
                               :page-sizes="[10,20,50,100]"
                               :page-size="table_alerts.eachPage"
                               :current-page="table_alerts.pageNow"
                               :total="table_alerts.count"
                               layout="total, sizes, prev, pager, next">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="btn_box">
          <el-button @click="closed_task_new"
                     class="cancel_btn">Cancel</el-button>
          <el-button @click="prev_task_handle"
                     class="prev_btn">Previous</el-button>
          <el-button @click="prev_task_handle_assign"
                     class="prev_btn">Assign</el-button>
          <el-button @click="prev_task_handle_save"
                     class="prev_btn">Save</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <!-- 添加到工单 -->
    <el-dialog class="pop_state_add pop_box"
               :close-on-click-modal="false"
               :modal-append-to-body="false"
               :visible.sync="add_state_change">
      <img src="@/assets/images/emerge/closed.png"
           @click="add_closed_state"
           class="closed_img"
           alt="">
      <div class="title">
        <div class="mask"></div>
        <span class="title_name">Add to ticket</span>
      </div>
      <div class="content">
        <el-row class="common-table-pattern">
          <el-col :span="24">
            <el-table class="common-table"
                      highlight-current-row
                      v-loading="table_add_works.loading"
                      :data="table_add_works.tableData"
                      @selection-change="handle_sel_table_add_works">
              <el-table-column label="Select"
                               width="50"></el-table-column>
              <el-table-column type="selection"
                               width="50"></el-table-column>
              <el-table-column prop="name"
                               label="Name"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="creator"
                               label="Created By"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="Priority"
                               width="120">
                <template slot-scope="scope">{{ scope.row.priority | priority }}</template>
              </el-table-column>
              <el-table-column prop="new_perator"
                               label="Assignee"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="Status"
                               width="80"
                               show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.status | work_status }}</template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24"
                  class="e-pagination">
            <el-pagination class="handle-pagination"
                           @size-change="sc_table_add_works"
                           @current-change="hcc_table_add_works"
                           :page-sizes="[10,20,50,100]"
                           :page-size="table_add_works.eachPage"
                           :total="table_add_works.count"
                           :current-page="table_add_works.pageNow"
                           layout="total, sizes, prev, pager, next">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
      <div class="btn_box">
        <el-button @click="add_closed_state"
                   class="cancel_btn">Cancel</el-button>
        <el-button @click="add_ok_state"
                   class="ok_btn">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import VmHandleProgress from './vm-handle-progress';
import VmHandleForm from './vm-handle-form';
import VmEmergePicker from "@/components/common/vm-emerge-picker";

export default {
  name: 'handle_threat_indicator',
  props: {
    threats: {
      type: String,
      default: 'horizontalthreat'
    },
  },
  data () {
    return {
      progress_data_source5: [],
      progress_data_source5_show: false,
      form_data_threat5: [],
      form_data_threat5_show: false,
      options_threat: [
        {
          value: "1",
          label: "Compromised"
        }
      ],
      params: {
        key_word: "",
        category: "",
        status: "",
        startTime: "",
        endTime: "",
        degree: ""
      },
      options_status: [
        {
          value: "all",
          label: "All"
        },
        {
          value: "0",
          label: "New"
        },
        {
          value: "1",
          label: "Pending"
        },
        {
          value: "2",
          label: "In Progress"
        },
        {
          value: "3",
          label: "Resolved"
        },
        {
          value: "4",
          label: "Ignored"
        },
        {
          value: "5",
          label: "False positive"
        }
      ],
      options_degrees: [
        {
          value: "low",
          label: "Low"
        },
        {
          value: "medium",
          label: "Medium"
        },
        {
          value: "high",
          label: "High"
        }
      ],
      table: {
        tableData: [],
        count: 0,
        pageNow: 1,
        maxPage: 1,
        eachPage: 10,
        multipleSelection: [],
        loading: true
      },

      //弹窗部分
      state_change: false,
      process_state: "",
      //工单任务
      task: {
        new: false,
        new_contet: true
      },
      task_params: {
        name: "",
        level: "",
        operator: "",
        new_operator: [],
        notice: ['email'],
        textarea: "",
        multiple: []
      },
      task_new: {
        level_list: [
          {
            value: "highest",
            label: "Critical"
          },
          {
            value: "high",
            label: "High"
          },
          {
            value: "medium",
            label: "Medium"
          },
          {
            value: "low",
            label: "Low"
          }
        ],
        operator_list: [],
      },
      //经办人数组
      table_operator: {
        tableData: [],
        count: 0,
        pageNow: 1,
        maxPage: 1,
        eachPage: 5
      },
      handle: {
        add: "",
        table_title: ["Alerts"],
        active: 0,
        dist: false,
        save: false
      },
      table_alerts: {
        tableData: [],
        tableData_new: [],
        count: 0,
        pageNow: 1,
        maxPage: 1,
        eachPage: 10,
        multipleSelection: []
      },
      //添加到工单
      add_state_change: false,
      table_add_works: {
        tableData: [],
        count: 0,
        pageNow: 1,
        maxPage: 1,
        eachPage: 10,
        loading: true,
        multipleSelection: []
      },
      add_params: {
        name: "",
        level: "",
        operator: [],
        notice: ['email'],
        remarks: "",
        multiple: [],
        old_as: [],
        remind: ['email']
      },
      detail_click_val: {},
      detail_click_column: {},
      oldPositon: {
        x: '',
        y: ''
      },
      newPositon: {
        x: '',
        y: ''
      }
    };
  },
  components: {
    VmHandleProgress,
    VmHandleForm,
    VmEmergePicker
  },
  created () {
    this.get_list_source_top5();
    this.get_list_threat_top5();
    this.get_list_threat();
  },
  methods: {
    //威脅源top5
    get_list_source_top5 () {
      this.$axios.get('/yiiapi/' + this.threats + '/source-top5')
        .then((resp) => {
          let { status, data } = resp.data;
          if (status == 0) {
            this.progress_data_source5 = data;
            this.progress_data_source5_show = true;
          }
        })
    },
    //威脅類型top5
    get_list_threat_top5 () {
      this.$axios.get('/yiiapi/' + this.threats + '/threat-top5')
        .then((resp) => {
          let { status, data } = resp.data;
          if (status == 0) {
            this.form_data_threat5 = data;
            this.form_data_threat5_show = true;
          }
        })
    },
    //威脅列表
    get_list_threat () {
      this.table.loading = true;
      let params_alert = {
        threat: ''
      };
      if (this.params.threat == 1) {
        params_alert.threat = 1;
      }
      this.$axios.get('/yiiapi/' + this.threats + '/list', {
        params: {
          start_time: this.params.startTime,
          end_time: this.params.endTime,
          degree: this.params.degree,
          fall_certainty: params_alert.threat,
          status: this.params.status,
          key_word: this.params.key_word,
          page: this.table.pageNow,
          rows: this.table.eachPage
        }
      }).then((resp) => {

        this.table.loading = false;

        let { status, data } = resp.data;

        let datas = data;

        if (status == 0) {

          let { data, count, maxPage, pageNow } = datas;
          this.table.tableData = data;
          this.table.count = count;
          this.table.maxPage = maxPage;
          this.table.pageNow = pageNow;

          // console.log(data)
        }
      })
    },

    //每頁多少條切換
    handleSizeChange (val) {
      this.table.eachPage = val;
      this.get_list_threat();
    },
    //頁數點擊切換
    handleCurrentChange (val) {
      this.table.pageNow = val;
      this.get_list_threat();
    },
    //下拉框change切換
    currentSelChange () {
      //this.get_list_threat();
    },
    //時間切換
    changeTime (data) {
      if (data) {
        this.params.startTime = (data[0].valueOf() / 1000).toFixed(0);
        this.params.endTime = (data[1].valueOf() / 1000).toFixed(0);
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    //搜索按鈕點擊事件
    submitClick () {
      this.get_list_threat();
    },
    //重置按鈕點擊事件
    resetClick () {
      this.params = {
        key_word: "",
        threat: "",
        status: "",
        startTime: "",
        endTime: "",
        degree: ""
      }
      $(document.querySelector('.el-button--text')).trigger('click');
      this.get_list_threat();
    },
    /*****************************/
    handleSelChange (val) {
      this.table.multipleSelection = val;
    },

    //进入告警详情页面
    //进入详情页面
    detail_click (val, column, cell) {
      this.detail_click_val = val
      this.detail_click_column = column
    },
    mousedown (event) {
      this.oldPositon = {
        x: '',
        y: ''
      }
      this.newPositon = {
        x: '',
        y: ''
      }
      this.oldPositon.x = event.clientX;
      this.oldPositon.y = event.clientY;
    },
    mouseup (event) {
      this.newPositon.x = event.clientX;
      this.newPositon.y = event.clientY;
      if (this.oldPositon.x == this.newPositon.x) {
        setTimeout(() => {
          if (Object.keys(this.detail_click_column).length != 0 && this.detail_click_column.type != 'selection') {
            this.$router.push({ path: "/detail/network", query: { detail: this.detail_click_val.id, type: this.$router.history.current.name } });
          }
        }, 10);
      } else {
        console.log('复制');
      }
    },

    /***********************************以下是弹窗部分****************************************/
    /***********************************以下是弹窗部分****************************************/

    // 状态变更选择
    change_state (command) {
      this.process_state = command;
      this.open_state();
    },

    //工单任务选择
    change_task (command) {
      if (command == "Create") {
        this.open_task_new();
      } else if (command == "Add to ticket") {
        this.open_add_new();
      }
    },

    /***************状态变更*****************/
    //打开状态变更弹窗
    open_state () {
      let sel_table_data = this.table.multipleSelection;
      if (sel_table_data.length == 0) {
        this.$message({ message: 'Please select alerts to be changed', type: 'warning' });
        return false;
      } else {
        this.state_change = true;
      }
    },

    //关闭状态变更弹窗
    closed_state () {
      this.state_change = false;
      this.$refs.multipleTable.clearSelection();
    },

    //状态变更取消按钮点击
    cancel_state () {
      this.closed_state();
    },

    //状态变更确定按钮点击
    ok_state () {
      let selected = this.table.multipleSelection;
      //资产ID处理
      let id_group = selected.map(x => { return x.id * 1 });
      //状态设置
      let process = this.process_state;
      let change_status = 0;

      if (process == 'In Progress') {
        change_status = 2;
      } else if (process == 'Resolved') {
        change_status = 3;
      } else if (process == 'Ignored') {
        change_status = 4;
      } else if (process == 'False positive') {
        change_status = 5;
      }

      this.$axios.put('/yiiapi/' + this.threats + '/do-alarm', {
        id: id_group,
        status: change_status
      })
        .then(resp => {

          let { status, data } = resp.data;
          if (status == 0) {
            this.$message.success('Change alert status successfully');
            //关闭弹窗
            this.closed_state();
            this.get_list_threat();
          } else {
            this.$message.error('Change alert status failed');
          }

        })
        .catch(err => {

          console.log(err);

        })
    },

    /***************工单任务*****************/

    //打开编辑工单
    open_task_new () {

      let sel_table_data = this.table.multipleSelection;
      let sel_table_attr = sel_table_data.map(x => { return x.status });
      if (sel_table_data.length == 0) {
        this.$message({ message: 'Please select the alert to be edited', type: 'warning' });
        return false;
      } else {
        if (sel_table_attr.includes('3')
          || sel_table_attr.includes('4')
          || sel_table_attr.includes('5')) {
          this.$message({ message: 'Alert whose status is resolved, ignored, false positive cannot create new tickets.', type: 'warning' });
        } else {
          this.table_alerts.tableData = sel_table_data;
          this.table_alerts.count = sel_table_data.length;
          //let pageNow = this.table_alerts.pageNow;
          let eachPage = this.table_alerts.eachPage;
          let handle_data = this.table_alerts.tableData.slice(0, eachPage);
          this.table_alerts.tableData_new = handle_data;

          //获取用户列表(经办人使用)
          this.$axios.get('/yiiapi/site/user-list')
            .then(resp => {
              let { status, data } = resp.data;

              if (status == 0) {
                this.task_new.operator_list = data;
              } else {
                this.task_new.operator_list = [];
              }
              this.task.new = true;
              this.task.new_contet = true;
            })
            .catch(err => {
              console.log('User list error');
              console.log(err);
            })
        }

      }

    },

    //关闭编辑工单
    closed_task_new () {
      this.task.new = false;
      this.task.new_contet = false;

      this.task_params = {
        name: "",
        level: "",
        operator: "",
        new_operator: [],
        notice: ['email'],
        textarea: "",
        multiple: []
      };
      this.table_operator.tableData = [];
      this.table_alerts.tableData_new = [];
      this.$refs.multipleTable.clearSelection();
    },

    //下一步时候验证工单名称，优先级、经办人等参数
    next_task_new () {
      var pattern = new RegExp("[`~!#%$^&*()=|{}':;',\\[\\]<>《》/?~！#￥……&*（）|{}【】‘；：”“'。，、？]");
      if (this.task_params.name == '') {
        this.$message.error('Ticket name is required');
        return false
      }
      if (pattern.test(this.task_params.name)) {
        console.log(true);
        this.$message.error("Tickets' name can't contain special characters");
        return false
      }
      if (this.task_params.level == '') {
        this.$message.error('Please select the priority');
      } else if (this.task_params.operator == '') {
        this.$message.error('Please select the assignee');
      } else {
        this.task.new_contet = false;
        this.handle.active = 0;
      }
    },

    //上一步
    prev_task_handle () {
      this.task.new_contet = true;
    },

    //经办人change处理
    select_changced (item) {

      let level_list = this.table_operator.tableData;
      let selected_id_attr = level_list.map(x => { return x.id });
      if (selected_id_attr.includes(item.id)) {
        this.$message.error('Exited');
      } else {
        this.table_operator.tableData.unshift(item);
      }
      let selected_name_attr = this.table_operator.tableData.map(x => { return x.username });
      this.task_params.new_operator = selected_name_attr;
    },

    //经办人页数点击
    hcc_table_operator (val) {
      this.table_operator.pageNow = val;
    },

    //tabs下table每页显示多少条
    sc_table_alerts (val) {
      this.table_alerts.eachPage = val;
      this.table_alerts.pageNow = 1;
      let handle_data = this.table_alerts.tableData.slice(0, val);
      this.table_alerts.tableData_new = handle_data;
    },

    //tabs下第一个table页数点击
    hcc_table_alerts (val) {
      this.table_alerts.pageNow = val;
      let eachPage = this.table_alerts.eachPage;
      let handle_data = this.table_alerts.tableData
        .slice((val - 1) * eachPage, val * eachPage);
      this.table_alerts.tableData_new = handle_data;
    },

    //tab下第一个table多选
    handle_sel_table_alerts (val) {
      this.table_alerts.multipleSelection = val;
      let selected = val.map(x => { return x.id * 1 });
      this.task_params.multiple = selected;
    },

    //新增工单按钮切换
    table_btn_toggle (index) {
      this.handle.active = index;
    },

    //编辑工单分配
    prev_task_handle_assign () {
      if (this.task_params.multiple.length == 0) {
        let alerts = this.table.multipleSelection;
        let selected = this.table.multipleSelection
          .map(x => { return x.id * 1 });
        this.task_params.multiple = selected;
      }
      console.log(this.task_params.multiple);

      this.handle.save = true;
      this.$axios.put('/yiiapi/' + this.threats + '/distribution-workorder',
        {
          name: this.task_params.name,
          priority: this.task_params.level,
          perator: this.task_params.new_operator,
          remarks: this.task_params.textarea,
          te_alert: this.task_params.multiple,
          remind: this.task_params.notice
        })
        .then((resp) => {
          this.handle.save = false;
          let { status, msg, data } = resp.data;
          if (status == 0) {
            this.$message.success('Assigned successfully');
            this.closed_task_new();
            this.get_list_threat();
          } else if (status == 1) {
            this.$message.error(msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //编辑工单保存
    prev_task_handle_save () {
      if (this.task_params.multiple.length == 0) {
        let alerts = this.table.multipleSelection;
        let selected = this.table.multipleSelection
          .map(x => { return x.id * 1 });
        this.task_params.multiple = selected;
      }
      console.log(this.task_params.multiple);

      this.handle.save = true;
      this.$axios.post('/yiiapi/' + this.threats + '/add-workorder',
        {
          name: this.task_params.name,
          priority: this.task_params.level,
          perator: this.task_params.new_operator,
          remarks: this.task_params.textarea,
          te_alert: this.task_params.multiple,
          remind: this.task_params.notice
        })
        .then((resp) => {
          this.handle.save = false;
          let { status, msg, data } = resp.data;
          if (status == 0) {
            this.$message.success('Saved successfully');
            this.closed_task_new();
            this.get_list_threat();
          } else if (status == 1) {
            this.$message.error(msg);
          }
        })
        .catch(err => {
          console.log(err);
        });

    },

    /***************新加到工单*****************/

    //添加到工单打开
    open_add_new () {
      this.add_open_state();
    },

    //新加到工单打开状态
    add_open_state () {
      let sel_table_data = this.table.multipleSelection;
      let sel_table_attr = sel_table_data.map(x => { return x.status });
      if (sel_table_data.length == 0) {
        this.$message({ message: 'Please select the alert that need to be added to the ticket', type: 'warning' });
        return false;
      } else {
        if (sel_table_attr.includes('3')
          || sel_table_attr.includes('4')
          || sel_table_attr.includes('5')) {
          this.$message({ message: 'Alert whose status is resolved, ignored, false positive cannot be added to the ticket.', type: 'warning' });
        } else {
          this.add_state_change = true;
          this.get_table_works_list();
        }
      }
    },

    //新加到工单取消状态
    add_closed_state () {
      this.add_state_change = false;
      this.add_params = {
        name: "",
        level: "",
        operator: "",
        new_operator: [],
        notice: ['email'],
        textarea: "",
        multiple: [],
        old_as: [],
        remind: ['email'],
      };
      this.$refs.multipleTable.clearSelection();
    },

    //获取列表
    get_table_works_list () {
      this.$axios.get('/yiiapi/' + this.threats + '/workorder-list', {
        params: {
          page: this.table_add_works.pageNow,
          rows: this.table_add_works.eachPage
        }
      }).then((resp) => {
        this.table_add_works.loading = false;
        let { status, data } = resp.data;
        let datas = data;
        if (status == 0) {
          let { data, count, maxPage, pageNow } = datas;
          data.map(function (v, k) {
            v.new_perator = (JSON.parse(v.perator)).join(',');
            v.checked = false;
          });
          this.table_add_works.tableData = data;
          this.table_add_works.count = count;
          this.table_add_works.maxPage = maxPage;
          this.table_add_works.pageNow = Number(pageNow);
        }
      })
    },

    //新加工单列表勾选某一条记录
    handle_sel_table_add_works (row) {
      console.log('**');
      console.log(row);
      this.table_add_works.multipleSelection = row;
    },

    //新加到工单确定
    add_ok_state () {

      let selected_attr = this.table.multipleSelection
        .map(x => { return x.id * 1 });
      this.add_params.multiple = selected_attr;

      //判断工单列表长度

      console.log(this.table_add_works.multipleSelection)

      let multipe = this.table_add_works.multipleSelection;

      console.log('******************')
      console.log(multipe)

      if (multipe.length == 0) {
        this.$message({ message: 'Please select the alert that need to be added to the ticket', type: 'warning' });
      } else if (multipe.length > 1) {
        this.$message({ message: 'Assets or alerts cannot be added to multiple tickets, please try again.', type: 'warning' });
      } else {
        console.log('******************');
        this.add_params.id = multipe[0].id;
        this.add_params.name = multipe[0].name;
        this.add_params.level = multipe[0].priority;
        this.add_params.perator = JSON.parse(multipe[0].perator);
        this.add_params.remarks = multipe[0].remarks;
        this.add_params.remind = JSON.parse(multipe[0].remind);

        this.add_params.old_as = JSON.parse(multipe[0].te_alert);
        //console.log(this.add_params);
        this.add_params.multiple = [...this.add_params.multiple, ...this.add_params.old_as];

        this.add_params.multiple = [...new Set(this.add_params.multiple)]

        var newArr = this.add_params.multiple.filter(item => item)

        this.add_params.multiple = newArr;

        console.log(this.add_params.multiple)

        this.handle.save = true;
        this.$axios.post('/yiiapi/' + this.threats + '/add-workorder',
          {
            id: this.add_params.id,
            name: this.add_params.name,
            priority: this.add_params.level,
            perator: this.add_params.perator,
            remind: this.add_params.remind,
            remarks: this.add_params.remarks,
            te_alert: this.add_params.multiple
          })
          .then((resp) => {
            this.handle.save = false;
            let { status, msg, data } = resp.data;

            console.log(resp)
            if (status == 0) {
              this.$message.success('Added successfully');
              //清空状态
              this.add_closed_state();
              this.get_list_threat();
            } else if (status == 1) {
              this.$message.error(msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    //每页显示多少条
    sc_table_add_works (val) {
      this.table_add_works.eachPage = val;
      this.table_add_works.pageNow = 1;
      this.get_table_works_list();
    },

    //新加工单列表分页页面切换
    hcc_table_add_works (val) {
      this.table_add_works.pageNow = val;
      this.get_table_works_list();
    },
  }
};
</script>

<style scoped lang="less">
@import '../../../../assets/css/less/common-tabs-pattern.less';
@import '../../../../assets/css/less/common-table-pattern.less';
.handle-risks_common {
  padding: 24px;
  .outside-top {
    display: flex;
    .ost {
      height: 302px;
      border-radius: 4px;
      background-color: #fff;
      padding: 24px;
      .ost-title {
        font-size: 16px;
        color: #333;
        text-align: left;
        font-family: PingFangMedium;
      }
      &.ost-1 {
        width: 1221px;
        margin-right: 24px;
        .ost-progress {
          margin-top: 16px;
        }
      }
      &.ost-2 {
        flex: 1;
        .ost-emerge {
          height: 100%;
        }
      }
    }
  }
  .outside-middle {
    margin: 24px 0;
    padding: 12px 0 24px;
    background-color: #fff;
    text-align: left;
    .osm-top {
      height: 62px;
      line-height: 62px;
      border-bottom: 1px solid #ececec;
      margin: 0 24px;
      .osm-img {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 19px 0;
      }
      .osm-title {
        display: inline-block;
        font-family: PingFang;
        font-size: 16px;
        color: #333333;
        margin-left: 6px;
      }
    }
    .osm-middle {
      height: auto;
      padding: 16px 24px;
      .osm-dt {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #333333;
        margin: 10px 0;
      }
      .osm-dd {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        line-height: 32px;
      }
    }
  }
  .outside-bottom {
    background-color: #fff;
    /*min-height: 500px;*/
    padding: 0;
  }

  /* 弹窗 */
  /* 状态变更 */
  /deep/ .pop_state_box {
    .el-dialog {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        height: 260px;
        padding: 30px;
        .closed_img {
          position: absolute;
          top: -18px;
          right: -18px;
          cursor: pointer;
          width: 46px;
          height: 46px;
        }

        .title {
          height: 24px;
          line-height: 24px;
          text-align: left;

          .title_name {
            font-size: 20px;
            color: #333333;
            line-height: 24px;
          }

          .mask {
            width: 24px;
            height: 0px;
            border-top: 0px;
            border-right: 2px solid transparent;
            border-bottom: 5px solid #0070ff;
            border-left: 2px solid transparent;
            transform: rotate3d(0, 0, 1, 90deg);
            display: inline-block;
            margin-right: -5px;
            margin-bottom: 4px;
            margin-left: -10px;
          }
        }

        .content {
          height: 128px;
          padding-top: 48px;
        }

        .btn_box {
          height: 42px;
          text-align: center;
          margin-bottom: 24px;

          .ok_btn {
            width: 136px;
            height: 42px;
            background: #0070ff;
            color: #fff;
          }

          .cancel_btn {
            width: 136px;
            height: 42px;
            border-color: #0070ff;
            background: #fff;
            color: #0070ff;
          }
        }
      }
    }
  }

  // 编辑工单
  /deep/ .task_new_box {
    .el-dialog {
      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        padding: 30px;

        .closed_img {
          position: absolute;
          top: -18px;
          right: -18px;
          cursor: pointer;
          width: 46px;
          height: 46px;
        }

        .title {
          height: 24px;
          line-height: 24px;
          text-align: left;

          .title_name {
            font-size: 20px;
            color: #333333;
            line-height: 24px;
          }

          .mask {
            width: 24px;
            height: 0px;
            border-top: 0px;
            border-right: 2px solid transparent;
            border-bottom: 5px solid #0070ff;
            border-left: 2px solid transparent;
            transform: rotate3d(0, 0, 1, 90deg);
            display: inline-block;
            margin-right: -5px;
            margin-bottom: 4px;
            margin-left: -10px;
          }
        }

        .step_box {
          height: 36px;
          margin: 20px 0 24px 0;
          .step_box1 {
            background-image: url('../../../../assets/images/emerge/step1.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 120px;
            height: 36px;
            float: left;
            position: relative;
            line-height: 36px;
            text-align: center;

            .step1_span {
              font-size: 14px;
            }

            .selected_img {
              position: absolute;
              left: 0;
              top: 0;
            }
          }

          .step_box2 {
            width: 120px;
            height: 36px;
            background-image: url('../../../../assets/images/emerge/step2.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            float: left;
            position: relative;
            line-height: 36px;
            text-align: center;
            margin-left: -10px;

            .step2_span {
              font-size: 14px;
            }
          }

          .step_now {
            color: #0070ff;
          }

          .step_past {
            color: #999999;
          }
        }

        .task_new_content {
          /*height: 480px;*/
          .task_content_box {
            height: 400px;
            overflow-y: auto;
            &::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
              border-radius: 6px;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 6px;
              background: #a8a8a8;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 6px;
              background: #f4f4f4;
            }

            .content_top {
              overflow: hidden;
              .content_top_left {
                float: left;
                width: 45%;

                .left_item {
                  margin-bottom: 16px;
                  display: flex;

                  .title {
                    width: 100px;
                    line-height: 38px;

                    .improtant_ico {
                      color: #ff3a36;
                    }
                  }

                  .task_new_input {
                    flex: 1;

                    .el-input__inner {
                      height: 38px;
                    }
                  }
                }
              }

              .content_top_right {
                float: right;
                width: 45%;

                .right_item {
                  margin-bottom: 16px;
                  display: flex;

                  .title {
                    width: 100px;
                    line-height: 38px;

                    .improtant_ico {
                      color: #ff3a36;
                    }
                  }

                  .task_new_input {
                    flex: 1;

                    .el-input__inner {
                      height: 38px;
                    }
                  }
                }
              }
            }

            .content_remarks {
              .title {
                font-size: 12px;
                color: #999999;
              }

              /deep/ .el-textarea {
                height: 92px;
                textarea {
                  resize: none;
                  height: 92px;
                  font-size: 14px;
                  color: #333;
                  font-family: PingFang;
                }
              }
              .el-textarea__inner:hover {
                border: none;
              }

              .el-textarea__inner {
                border: none;
                background: #f8f8f8;
              }
            }

            .content_table {
              margin-top: 16px;

              /deep/ .el-table td {
                padding: 0;
                height: 32px;
              }
              /deep/ .el-table th {
                padding: 0;
                height: 36px;
                background: #f8f8f8;
                .cell {
                }
              }

              /deep/ .el-pagination {
                margin-top: 20px;
                text-align: center;
              }
            }
          }

          .btn_box {
            margin-top: 36px;
            margin-bottom: 24px;
            height: 42px;
            text-align: center;

            .cancel_btn {
              border: 1px solid #0070ff;
              background: #fff;
              color: #0070ff;
              width: 136px;
              height: 42px;
              font-size: 16px;
            }

            .next_btn {
              background-color: #0070ff;
              color: #fff;
              width: 136px;
              height: 42px;
              font-size: 16px;
            }
          }
        }

        .task_handle_content {
          .handle_content_top {
            height: 42px;
            text-align: left;
            .change_btn,
            .ref {
              background-color: #0070ff;
              border-color: #0070ff;
              width: 136px;
              height: 42px;
              color: #fff;
            }

            .cel {
              border: 1px solid #0070ff;
              background: #fff;
              color: #0070ff;
              width: 136px;
              height: 42px;
              margin-left: 0;
            }
          }

          .table_box {
            margin-top: 24px;

            .table_box_title {
              height: 38px;
              li {
                height: 38px;
                width: 92px;
                float: left;
                font-size: 14px;
                line-height: 38px;
                color: #bbbbbb;
                text-align: center;
                border-top: 2px solid #fff;
              }

              li.active {
                cursor: pointer;
                background: #eef6ff;
                color: #0070ff;
                border-top: 2px solid #0070ff;
              }
            }
            /deep/ .el-table {
              font-size: 12px;
              thead.has-gutter {
                th {
                  color: #333333;
                  background: #f8f8f8;
                  .cell {
                  }
                }
              }
              .cell {
                color: #333333;
              }
            }

            /deep/ .el-pagination {
              margin-top: 20px;
              text-align: center;
            }
          }

          .btn_box {
            margin-top: 36px;
            margin-bottom: 24px;
            height: 42px;
            text-align: center;

            .cancel_btn {
              border: 1px solid #0070ff;
              background: #fff;
              color: #0070ff;
              width: 136px;
              height: 42px;
              font-size: 16px;
            }

            .prev_btn {
              background-color: #0070ff;
              color: #fff;
              width: 136px;
              height: 42px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  //添加到工单
  /deep/ .pop_state_add {
    .el-dialog {
      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        max-height: 640px;
        padding: 30px;

        .closed_img {
          position: absolute;
          top: -18px;
          right: -18px;
          cursor: pointer;
          width: 46px;
          height: 46px;
        }

        .title {
          height: 24px;
          line-height: 24px;
          text-align: left;

          .title_name {
            font-size: 20px;
            color: #333333;
            line-height: 24px;
          }

          .mask {
            width: 24px;
            height: 0px;
            border-top: 0px;
            border-right: 2px solid transparent;
            border-bottom: 5px solid #0070ff;
            border-left: 2px solid transparent;
            transform: rotate3d(0, 0, 1, 90deg);
            display: inline-block;
            margin-right: -5px;
            margin-bottom: 4px;
            margin-left: -10px;
          }
        }

        .content {
          padding-top: 48px;
        }

        .btn_box {
          height: 42px;
          text-align: center;
          margin-bottom: 24px;
          margin-top: 36px;

          .ok_btn {
            width: 136px;
            height: 42px;
            background: #0070ff;
            color: #fff;
          }

          .cancel_btn {
            width: 136px;
            height: 42px;
            border-color: #0070ff;
            background: #fff;
            color: #0070ff;
          }
        }
      }
    }
  }

  /deep/ .pop_box {
    .el-dialog {
      background: #ffffff;
      border-radius: 4px;
      position: fixed;
      // top: 200px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>

